<template>
	<div class="page clear" style="text-align: left;">
		<!-- <div class="top">
			<div style="float:left;"><span @click="goBack" class="goback">知识库管理</span>　|　<span>编辑文章</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
		<div id="addform">
			<el-form :model="editArticleForm" block>
				<el-form-item label="标题:" :label-width="formLabelWidth">
					<el-input v-model="editArticleForm.title" auto-complete="off" class="inpu" autofocus
						placeholder="输入文章标题"></el-input>
				</el-form-item>
				<el-form-item label="分类:" class="formline" :label-width="formLabelWidth">
					<el-select v-model="editArticleForm.article_type_id" class="inpu">
						<el-option v-for="item in articleTypes" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select><br>
				</el-form-item>
				<!-- <el-form-item class="formline" label="概述:" :label-width="formLabelWidth" >
				<el-input v-model="editArticleForm.summary" auto-complete="off" class="inpu" type="textarea" :rows="3" placeholder="输入描述内容"></el-input>
			</el-form-item> -->
				<!-- <el-form-item label="内容:" :label-width="formLabelWidth" >
				<el-input v-model="form.content" auto-complete="off" class="inpu" type="textarea" :rows="3" placeholder="输入描述内容"></el-input>
			</el-form-item> -->
				<el-form-item class="formline" label="是否首页:" :label-width="formLabelWidth" style="margin-top:-0.2rem;">
					<el-switch style="display:inline-block;vertical-align:top;" v-model="editArticleForm.is_index"
						:width="stateWidth" class="demo" active-color="#13ce66" inactive-color="#ccc" active-text="启用"
						inactive-text="禁用" :active-value="one" :inactive-value="zero">
					</el-switch>
				</el-form-item>
				<el-form-item class="formline" label="是否推荐:" :label-width="formLabelWidth" style="margin-top:-0.3rem;">
					<el-switch style="display:inline-block;vertical-align:top;" v-model="editArticleForm.is_recommend"
						:width="stateWidth" class="demo" active-color="#13ce66" inactive-color="#ccc" active-text="启用"
						inactive-text="禁用" :active-value="one" :inactive-value="zero">
					</el-switch>
				</el-form-item>
				<el-form-item label="排序:" class="formline" :label-width="formLabelWidth">
					<el-input v-model="editArticleForm.list_order" auto-complete="off" class="inpu" style="width:2.5rem;"
						spellcheck="false"></el-input>
					<el-tooltip placement="top" effect="light" style="margin-left:0.1rem;margin-top:-2px;">
						<div slot="content" style="line-height:0.4rem;color:red;font-size:0.3rem!important;">
							请输入自然数(0,1,2,3,...),默认以添加的先后顺序排序</div>
						<span class="sortIcon" style="color:red;">?</span>
					</el-tooltip>
					<!-- <span class="tip">请输入自然数(0,1,2,3,...),默认以添加的先后顺序排序</span> -->
				</el-form-item>
				<el-form-item label="图片:" :label-width="formLabelWidth" class="formline">
					<div class="newimg">
						<img src="#" id="thumb" class="thumb" />
						<input type="file" id="editid" @change="addUpload" />
						<div class="tip" style="display: block;">点击上图可上传（或更换）图片</div>
					</div>
				</el-form-item>
			</el-form>
			<div style="text-align: left;margin:0.3rem 0 0 0.7rem">
				<el-button type="success" size="small" @click="editArticle">保存</el-button>
				<!-- <el-button type="primary" size="small" @click="resetForm">重置</el-button> -->
			</div>
		</div>
		<div class="editBox">
			<el-form :model="editArticleForm" block>
				<el-form-item label="概述:" :label-width="formLabelWidth">
					<el-input v-model="editArticleForm.summary" auto-complete="off" class="inpu" type="textarea" :rows="2"
						style="width:800px;" placeholder="输入描述内容"></el-input>
				</el-form-item>
				<el-form-item class="formline" label="内容:" :label-width="formLabelWidth">
					<vue-ueditor-wrap class="content_text  edui-container" v-model="editArticleForm.content" :config="editorConfig"
						editor-id="editor-demo-01"></vue-ueditor-wrap>
				</el-form-item>
			</el-form>
		</div>

	</div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap';
import { getArticleTypes } from "../request.js"
export default {
	name: 'editArticle',
	data() {
		return {
			one: 1,
			zero: 0,
			editorConfig: {
				//是否允许进入编辑器的div标签自动变成p标签
				allowDivTransToP: false,
				//编辑器自动被内容层高
				autoHeightEnabled: true,
				//初始容器高度
				initialFrameHeight: 300,
				//初始容器宽度
				initialFrameWidth: 800,
				//UEditor的全局配置，类型为对象，默认为空对象
				//  UEDITOR_CONFIG:{
				// initialStyle:{
				// 	  margin:10,
				// 	 // overflow:'auto',
				// }

				//  },
				enableAutoSave:false, // 自动保存
				// 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
				UEDITOR_HOME_URL: "/static/UEditor/",
				// 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
				//serverUrl: "http://120.253.60.248:18080/uEditor/php/controller.php?token="+localStorage.getItem("attoken"),
			    serverUrl: this.$baseurl+ "api/editor/server?token="+localStorage.getItem("attoken")
			},
			formLabelWidth: '2rem',
			stateWidth: 66,
			articleTypes: [],
			ws: null,
			baseurl: this.$baseurl,
			editArticleForm: {
				"id": '',
				"title": "",                  //标题
				"article_type_id": '',        //'文章类型ID',
				"image": '',                  //'图片',
				"summary": "",                //'概述',
				"content": "",                //'内容',
				"is_index": "",               //'是否首页',
				"is_recommend": '',           //'是否推荐',
				//"is_verify": '',            //'是否通过审核',
				//"author": '',               //'作者',
				//"from":'',                  //'文章来源',
				//"link":'',                  //链接地址',
				"list_order": '',              // '排序',
				//"visit_count":'',           // '浏览次数',
				//"update_time":'',           // '更新时间',
				//"create_time":''            //  '创建时间',
			},
		}
	},

	components: {
		VueUeditorWrap
	},
	created() {
		this.editArticleForm.id = this.$route.query.id;
		this.getTypes();
	},

	methods: {
		getTypes() {
			this.articleTypes = [];
			getArticleTypes().then(data => {
				this.articleTypes = data;
				this.getArticle();
				//this.editArticleForm.article_type_id = this.articleTypes[0].value;
				///console.log(this.articleTypes);
			});
		},

		getArticle() {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/article/info',
				data: {
					"id": this.editArticleForm.id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					for (var key in this.editArticleForm) {
						this.editArticleForm[key] = res.data.data[key];
					}
					this.editArticleForm.image = this.baseurl + res.data.data.image;
					if (res.data.data.image) {
						document.getElementById("thumb").src = this.editArticleForm.image;
					} else {
						document.getElementById("thumb").src = "../../static/noimg.png";
					}
				}

			}).catch(error => {
				console.log(error)
			});
		},

		goBack() {
			this.$router.go(-1);
		},

		addUpload() {
			this.ws = null;
			var that = this;
			var fileLen = document.getElementById('editid').files;
			this.ws = fileLen[0];
			var reads = new FileReader();
			reads.readAsDataURL(this.ws);
			reads.onload = function (e) {
				console.log(this.result)
				document.getElementById('thumb').src = this.result;
			}
		},
		editArticle() {
			var that = this;
			var that = this;
			var upform = new FormData();
			for (var key in this.editArticleForm) {
				upform.append(key, that.editArticleForm[key]);
			}
			upform.append("image", that.ws);
			this.$http({
				method: 'post',
				url: 'api/article/update',
				data: upform
			}).then(res => {
				if (res && res.data.result == "success") {
					this.$message({
						message: '恭喜,添加文章成功!',
						type: 'success',
						center: true
					});
					this.$router.go(-1);
				}
				//console.log("charu")
			}).catch(error => {

				console.log(error);
			});
		}
	}
}
</script>

<style scoped>
@media all and (max-width:1600px) {
	.formline {
		margin-top: -0.3rem !important;
	}
}

.inpu /deep/ .el-input__inner {
	padding-left: 4px;
}

.inpu /deep/ .el-textarea__inner {
	padding-left: 4px;
}

#addform {
	float: left;
	text-align: left;
	margin: 0;
	margin-top: 0.3rem;
	min-width: 25%;
	/* border:1px solid red; */

}

.editBox {
	float: left;
	display: inline-block;
	margin: 0;
	margin-top: 0.3rem;
}

.inpu {
	width: 5rem;
}

#upload {
	position: relative;
	left: -1.4rem;
	top: -0.3rem;
	z-index: 11;
}

#editid {
	width: 1.5rem;
	height: 1.5rem;
	/* border:1px solid red; */
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 12;
	opacity: 0;
}

.thumb {
	width: 1.5rem;
	height: 1.5rem;
}

.formline {
	/* border: 1px solid red; */
	/* height:0.9rem; */
	width: 100%;
	margin-top: -0.2rem;
}

.tip {
	display: inline-block;
	color: #FF5722;
	font-size: 0.25rem;
	line-height: 0.35rem;
	/* margin-top: 0 !important; */
}

.sortIcon {
	display: inline-block;
	vertical-align: middle;
	margin-left: -0.1rem;
	width: 0.3rem !important;
	height: 0.3rem;
	font-size: 0.3rem;
	line-height: 0.3rem;
	text-align: center;
	color: #999;
	background-color: #ccc;
	border-radius: 50%;
}

.formline /deep/ .el-switch {
	width: 130px !important;
}

.demo /deep/ .el-switch__label--right {
	position: relative !important;
	right: -68px !important;
	top: -21px !important;
	color: #fff;
}

.content_text {
	box-sizing: border-box;
	width: 100%;
	max-height: 72vh;
	overflow-x: hidden;
	overflow-y: auto;
}
</style>
